<template>
  <el-container class="home-container">
    <!-- 头部 -->
    <el-header>
      <div>
        <img src="../assets/175778df2b88eca.jpg" width="60px" height="60px" alt="">
        <span>电商管理系统</span>
      </div>
      <el-button @click="logout" type="info">退出</el-button>
    </el-header>
    <!-- 页面主题 -->
    <el-container>
    <!--侧边栏 -->
      <el-aside :width="isCollapse? '64px':'200px'">
        <div class="toggle-button" @click="toggleCollapse">|||</div>
        <!-- 侧边栏菜单区 -->
     <el-menu
      background-color="#333744"
      text-color="#fff"
      active-text-color="#409EFF"
      unique-opened
      :collapse="isCollapse"
      :collapse-transition="false"
      router
      :default-active="$route.path"
      staticEnablePopImageOut="false">
      <!-- 一级菜单 el-submenu   -->
      <el-submenu :index="item.id+''" v-for="item in menuList" :key="item.id">
        <!-- 一级菜单模板  图标  文本 -->
        <template #title>
          <i :class="iconsObj[item.id]"></i>
          <span>{{item.authName}}</span>
        </template>
        <!-- 二级菜单组件  el-menu-item-->
        <el-menu-item :index="'/'+subItem.path" v-for="subItem in item.children" :key="subItem.id">
          <template #title>
          <i class="el-icon-menu"></i>
          <span>{{subItem.authName}}</span>
        </template>
        </el-menu-item>
      </el-submenu>
     </el-menu>
      </el-aside>
      <!-- 右边内容主题 -->
      <el-main>
        <!-- 路由占位符 -->
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>
<!-- 当前home对应的页面只有在登录情况下才允许访问；如果在未登陆状态，不允许看到home对应的页面，除了登录页其他都是有权限页面 -->
<!-- 8.退出实现原理   只需要销毁本地的token即可，这样后续的请求就不会携带token，必须重新登陆生成一个新的token才可以访问页面
8.1   清空token  window.sessionStorage.clear()
8.2   跳转到登录页  this.$router.push('/login')
9.页面布局  按需导入container、Header\main\aside等组件,整体布局先上下,再左右
9.1 依次为header\aside\main添加背景色 实用工具:fscapture  ctrl+l获取颜色色号
9.2  让main撑满整个主题区域 右键检查发现el-container没有占满区域  设置home-container高度为100%
9.3   header为左右布局,左侧为log+电商..\右侧为退出按钮,要实现左右布局最简单用flex布局,左侧用div包括,右侧为按钮
具体见el-header布局
10.左侧菜单栏布局  菜单分为2级,并且可以折叠   elementui-NavMenu导航菜单-侧栏-自定义粘贴相关代码至el-aside,删除部分不用的属性等
10.1 按需导入menu,注册等   el-menu容器嵌套一级菜单el-submenu,在el-submenu通过template指定一级菜单图标和文本，然后在el-submenu嵌套二级菜单el-menu-item通过template指定二级菜单图标和文本
一级菜单组件 el-submenuel-menu-item   二级菜单组件  el-menu-item
11. 通过接口获菜单数据
11.1  通过axios请求拦截器添加token,保证拥有获取数据的权限   只要通过axios向后端发送数据请求，就会先调用use回调函数对请求进行预处理(加token)，预处理之后才会发送到服务器
axios请求拦截：axios.interceptors.request.use(config=>{
  为请求头对象，添加token验证的authorization字段
  config.headers.Authorization = window.sessionStorage.getItem('token')
  return config
})
11.2 在main.js引入axios请求拦截器；  登录请求服务器不发令牌，Authorization为null,之后每次请求有权限的接口，服务器都会判断Authorization是否符合请求，符合会响应
12. 发起请求获取左侧菜单数据
12.1.在整个页面刚一加载时就应该立马获取左侧菜单，在created中定义函数getMenuList
12.2. 在methods中定义getMenuList异步函数，将获取的左侧菜单数据保存在menuList中
13 左侧菜单ui绘制(渲染菜单) 双层for循环，外层for循环渲染一级菜单，内层for循环渲染二级菜单
13.1 在el-submenu标签上循环渲染一级菜单v-for="item in menuList"，切记每一个v-for要提供唯一key(有id就用id),为template标签里的span动态绑定菜单名称{{item.authName}}，
index相同时，点击一个菜单所有都展开或关闭，需要为el-submenu指定唯一的index(有id就用id),实现点击谁谁展开或关闭
:index="item.id+''加一个空字符串将数字转换为字符串
13.2  渲染二级菜单就要循环一级菜单的children即v-for="subItem in item.children"，切记每一个v-for要提供唯一key(有id就用id),为template标签里的span动态绑定菜单名称{{subItem.authName}}，
index相同时，点击一个菜单所有都展开或关闭，需要为el-menu-item指定唯一的index(有id就用id),实现点击谁谁展开或关闭
:index="submenu.id+''加一个空字符串将数字转换为字符串
14 左侧菜单美化
14.1 点击菜单高亮蓝色：active-text-color
14.2 二级菜单图标  icon
14.3 一级菜单图标  自定义图标  v-for循环时每循环一次生成一个一级菜单，因此图标可以动态绑定id对应的值进行渲染
15 左侧菜单优化
15.1 每次只展开一个子菜单 unique-opened：只保持一个子菜单展开(直接写unique-opened默认为true或者:unique-opened="true")
15.2  去掉左侧菜单的border-right\
16 实现左侧菜单的折叠与展开功能
16.1 在菜单之上放置一个折叠展开按钮( ||| )
16.2 为按钮添加点击事件@click="toggleCollapse"
16.3 点击按钮实现左菜单的折叠与展开(:collapse属性动态绑定Boolean值实现折叠与展开，false为展开，true为收起)，因此只需要点击按钮切换collapse值即可实现展开折叠
16.4 关闭折叠动画
16.5 实现左菜单折叠时侧边栏一块折叠  分析:因为侧边栏宽度写死时，导致左菜单折叠但侧边栏依旧展开，
因此我们可以在isCollapse为true时即左菜单折叠时将侧边栏宽度变小，isCollapse为false时即左菜单展开时将侧边栏宽度变大即可
右击检查得到菜单折叠时宽度为64px, 可以用三元运算实现侧边栏宽度:width="isCollapse? '64px':'200px'
17 实现登陆成功后访问/home，在main区域展示welcome组件，即由/home直接重定向到welcome
17.1 定义一个welcome组件，路由导入，放在home的children中
17.2 在home页的main区域放一个路由占位符router-view，
17.3 将welcome路由设置为home的子路由，这样就实现了登陆成功后访问/home,/home默认重定向到/welcome，即先把home组件展示出来，
然后又重定向到/welcome，此时在home组件路由占位符处展示出wolcome
 18  点击左侧菜单实现切换main区域内容
 18.1 为左侧菜单开启路由模式 加上router属性即可，
 18.2 加上router后，启用该模式会在激活导航时以index作为path进行路由跳转(index会作为跳转地址),
 将当前的path作为唯一的跳转路径即可(path为后端获取数据  将原来index绑定的id变为path
 :index="'/'+subItem.path"为路由跳转路径
19. 用户列表开发  点击用户列表，在main区域展示对应内容  由面包屑和card组成
19.1  创建用户列表user组件  导入路由组件
19.2  解决点击(二级)菜单不高亮问题 :default-active="$route.path"
19.3 见Users组件 -->

<script>
export default {
  name: 'home',
  data () {
    return {
      // 左侧菜单数据
      menuList: [],
      // 图标
      iconsObj: {
        '125': 'iconfont icon-user',
        '103': 'iconfont icon-tijikongjian',
        '101': 'iconfont icon-shangpin',
        '102': 'iconfont icon-danju',
        '145': 'iconfont icon-baobiao'
      },
      // 是否折叠
      isCollapse: false

    }
  },
  created() {
    // 在整个页面刚一加载时就应该立马获取左侧菜单
    this.getMenuList()
  },
  methods: {
    logout () {
      window.sessionStorage.clear()
      this.$router.push('/login')
    },
    // 获取所有菜单
    async getMenuList() {
      // 解构赋值把data解构出来并重命名为res接收，打印console.log(res),有5个一级菜单，通过children属性嵌套二级菜单，
      // 拿到菜单数据后，为了将获取的菜单渲染出来，将其挂载在自己的data数据中为menuList[],
      // 判断status是否等于200，否，提示错误信息，是，将获取的菜单赋值给data的menuList[]
      const { data: res } = await this.$http.get('menus')
      // console.log(res)
      if (res.meta.status !== 200) return this.$message.error(res.meta.msg)
      this.menuList = res.data
    },
    // 点击按钮实现左菜单的折叠与展开
    toggleCollapse() {
      this.isCollapse = !this.isCollapse
    }
  }

}

</script>

<style type="text/less" lang='less' scoped>
.home-container {
  height: 100%;
}
// elementui提供的组件,组件名称就是类名,el-header就可以直接当作类名
.el-header {
  background-color: #373D41;
  // el-header flex布局
  display: flex;
  justify-content: space-between;
  align-items: center;  /* 按钮剧中 */
  padding-left: 0;  /* 去图片左侧空白 */
  color: #fff;
  font-size: 20px;
> div {   /* 嵌套设置左侧div */
        display:flex;
        align-items:center;
            span {
              margin-left: 15px;

            }
     }

}
.el-aside {
  background-color: #333744;
  .el-menu {
  border-right: none;
 }
}
.el-main {
  background-color: #EAEDF1;
}
.iconfont {
  margin-right: 10px;
}
.toggle-button {
  background-color: #4A5064;
  font-size: 10px;
  color:#fff;
  line-height: 25px;
  text-align: center;
  letter-spacing: 0.2em;
  cursor: pointer;
}

</style>
